<template>
  <el-dialog
    title="请假申请"
    v-if="dialogVisible"
    :visible.sync="dialogVisible"
    @close="cancel"
    width="700px"
  >
    <el-tabs tab-position="right" style="max-height: 520px;">
      <el-tab-pane label="详细信息">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="姓名">
            <el-input v-model="form.userName" :readonly="isReadOnly"/>
          </el-form-item>
          <el-form-item label="类型">
            <el-select v-model="form.type" :disabled="isReadOnly" class="search-item" placeholder="请选择类型">
              <el-option label="事假" value="事假"/>
              <el-option label="病假" value="病假"/>
              <el-option label="产假" value="产假"/>
            </el-select>
          </el-form-item>
          <el-form-item label="开始时间">
            <el-col :span="12">
              <el-date-picker
                v-model="form.startTime"
                :disabled="isReadOnly"
                type="date"
                @change="change"
                placeholder="选择日期"
                style="width: 100%;"
              />
            </el-col>
            <el-col :span="12">
              <el-radio-group v-model="form.startType" size="medium" style="padding-left: 10px">
                <el-radio border label="上午" :disabled="isReadOnly"/>
                <el-radio border label="下午" :disabled="isReadOnly"/>
              </el-radio-group>
            </el-col>
          </el-form-item>
          <el-form-item label="结束时间">
            <el-col :span="12">
              <el-date-picker
                v-model="form.endTime"
                :disabled="isReadOnly"
                type="date"
                @change="change"
                placeholder="选择日期"
                style="width: 100%;"
              />
            </el-col>
            <el-col :span="12">
              <el-radio-group v-model="form.endType" size="medium" style="padding-left: 10px">
                <el-radio border label="上午" :disabled="isReadOnly"/>
                <el-radio border label="下午" :disabled="isReadOnly"/>
              </el-radio-group>
            </el-col>
          </el-form-item>
          <el-form-item label="天数">
            <el-input v-model="form.day" :readonly="true"/>
          </el-form-item>
          <el-form-item label="请假事由">
            <el-input v-model="form.remark" type="textarea" :readonly="isReadOnly"/>
          </el-form-item>
          <bpmn-form ref="bpmnForm" :multiple="true" proc-def-key="test" :business-id="form.id"
                     @complete="onComplete"></bpmn-form>
          <pop-btn 
            ref="btn"
            proc-def-key="test"
            :business-id="form.id"
            :btns="btns"
            :task-id="form.taskId"
            @save="onSave"
            @approval="onApprove"
            @submit="onApply"
            @cancel="cancel"
          />
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="审批记录" v-if="form.procInstId">
        <wf-process :inst-id="form.procInstId"/>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script>
  import {saveItem, startItem, completeItem} from '@/api/wf/leave'
  import msgUtil from '@/utils/msgUtil'
  import WfProcess from '@/components/WorkFlow/process/index'
  import startMixin from '@/mixins/wfStartMixin'
  import approveMixin from '@/mixins/wfApproveMixin'
  import PopBtn from '@/components/ExtBpmn/Btn/index'
  import BpmnForm from '@/components/ExtBpmn/ExtForm/bpmn-form'

  export default {
    name: "detail",
    components: {
      WfProcess,
      BpmnForm,
      PopBtn
    },
    mixins: [startMixin, approveMixin],
    model: { // 绑定v-model的值
      prop: 'show',
      event: 'change'
    },
    props: {
      show: {
        type: Boolean,
        default: false
      },
      data: {
        type: Object,
        default: () => {
        }
      },
      readonly: {
        type: Boolean,
        default: false
      },
      btns: {
        type: Array,
        default: []
      },
    },
    watch: {
      show: {
        handler(val) {
          this.dialogVisible = val
          // 如果外面有传值进来就设置值，没有就清空历史值
          if (!this.data) {
            Object.keys(this.form).forEach(key => (this.form[key] = ''))
          } else {
            this.form = this.data
          }
        }
      }
    },
    computed: {
      isReadOnly: function () {
        return this.wfNode.status != '0' && this.wfNode.status != '1'
      }
    },
    data() {
      return {
        dialogVisible: false,
        wfNode: {},
        form: {
          userName: null,
          type: null,
          startTime: null,
          endTime: null,
          startType: null,
          endType: null,
          remark: null,
          day: 0
        },
      }
    },
    methods: {
      cancel() {
        // 修改v-model的绑定值，其实就是关闭对话框
        this.$emit('change', false)
        this.dialogVisible = false
      },
      onSave() {
        saveItem(this.form).then(res => {
          if (res.code === 200) {
            msgUtil.success2('保存成功!')
            this.fetchData()
            this.cancel()
          }
        })
      },
      onComplete(data) {
        this.wfNode = data
      },
      onApprove(params) {
        const dealForm = this.$refs.bpmnForm.getForm()
        if(this.$refs.bpmnForm.showUserSelect && !dealForm.selectAssigneeList.length){
           msgUtil.error2('请选择处理人!')
           this.$refs.btn.loading = false
           return
        }
        this.approveForm.procDefKey = 'test'
        this.approveForm.businessId = this.form.id
        this.approveForm.procInstId = this.wfNode.procInstId
        this.approveForm.description = dealForm.description
        this.approveForm.selectAssigneeList = dealForm.selectAssigneeList
        // 覆盖按钮参数
        Object.assign(this.approveForm, params)
        completeItem(this.approveForm).then(r => {
          msgUtil.success2('审批成功!')
          this.cancel()
          this.fetchData()
        })
      },
      onApply() {
        saveItem(this.form).then(res => {
          if (res.code === 200) {
            this.form.id = res.data
            this.startForm.businessId = res.data
            this.startForm.procDefKey = 'test'
            const dealForm = this.$refs.bpmnForm.getForm()
            this.startForm.selectAssigneeList = dealForm.selectAssigneeList
            if (this.$refs.bpmnForm.showUserSelect && !dealForm.selectAssigneeList.length) {
              msgUtil.error2('请选择处理人!')
              this.$refs.btn.loading = false
              return
            }
            startItem(this.startForm).then(r => {
              msgUtil.success2('上报成功!')
              this.fetchData()
              this.cancel()
            })
          }
        })
      },
      change() {
        if (!this.form.endTime || !this.form.startTime) {
          return
        }
        let num = 0
        if (this.form.startType == '下午') {
          num += 0.5
        } else {
          this.form.startType = '上午'
          num += 1
        }

        if (this.form.endType == '上午') {
          num += 0.5
        } else {
          this.form.endType = '下午'
          num += 1
        }
        const end = this.form.endTime
        const start = this.form.startTime
        this.form.day = parseInt((end - start) / 86400000) + num - 1;
        this.form.btnList = []
        this.form.logList = []
      },
      fetchData() {
        this.$emit('reload')
      }
    }
  }
</script>

<style scoped>

</style>
